<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <cube-button>11</cube-button>  -->
    <v-header :seller="seller"></v-header>
    <div class="tab-wrapper">
        <tab :tabs=tabs /> 
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import VHeader from './components/v-header/v-header'
import Goods from "components/goods/goods"
import Ratings from "components/ratings/ratings"
import Seller from "components/seller/seller"
import Tab from './components/tab/tab'
import { getSeller } from "api"

export default {
  name: 'app',
  data(){
      return {
        seller:{}
      }
  },
  computed:{
    tabs(){
      return [
        {
          label:"商品",
          component: Goods,
          data:this.seller
        },
        {
          label:"评价",
          component: Ratings,
          data:this.seller
        },
        {
          label:"商家",
          component: Seller,
          data:this.seller
        }
      ]
    }    
  },
  created(){
    this._getSeller()
  },
  methods:{
    _getSeller(){
        getSeller().then((seller) => {
          this.seller = seller
        })
    }
  },
  components: {
    VHeader,
    Tab
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
#app 
  .tab-wrapper
      position:fixed
      top: 136px
      left: 0
      right: 0
      bottom: 0
</style>
